<template>
  <!-- 本月用电/水走势 -->
  <div class="chart-box2">
    <div class="chart-title">本月用电/水走势</div>
    <div class="chart-content">
      <div class="chart-container" :id="chartId"></div>
    </div>
  </div>
</template>

<script>
import {
  defineComponent,
  onMounted,
  reactive,
  toRefs,
  onBeforeUnmount,
  nextTick,
  watch,
  toRaw,
} from "vue";
import { Chart, registerTheme } from "@antv/g2";
import common from "../../utils/common";
import store from "../../../../store";

export default defineComponent({
  name: "EnergyMonthTrend",
  setup() {
    const state = reactive({
      chartId: "energyMonthTrendChart",
      chart: null,
      data: [],
    });

    const handleTabChange = (e) => {
      const { key } = e;
      state.activeTab = key;
    };

    const initChart = () => {
      let data = state.data;

      state.chart = new Chart({
        container: state.chartId,
        autoFit: true,
        theme: "chartTheme",
      });

      state.chart.data(data);

      state.chart.scale({
        date: {
          alias: "日期",
        },
        el: {
          alias: "用电",
          min: 0,
          formatter: (value) => {
            return value + "kw·h";
          },
          sync: true,
          nice: true,
        },
        water: {
          alias: "用水",
          min: 0,
          formatter: (value) => {
            return value + "㎡";
          },
          sync: true,
          nice: true,
        },
      });

      state.chart.axis("water", {
        grid: null,
        title: {
          style: {
            fill: common.theme.primaryGreen,
          },
        },
      });
      state.chart.axis("el", {
        title: {
          style: {
            fill: common.theme.primaryOrange,
          },
        },
      });

      state.chart.tooltip({
        showCrosshairs: true,
        shared: true,
      });

      state.chart.line().position("date*el").color(common.theme.primaryOrange);
      state.chart
        .line()
        .position("date*water")
        .color(common.theme.primaryGreen)
        .shape("dash");

      const annotationOption = {
        line: {
          length: 50,
          style: {
            stroke: common.theme.lightGreen,
          },
        },
        greenStyle: {
          fill: common.theme.lightGreen,
          fontWeight: 600,
          fontSize: 12,
        },
        redStyle: {
          fill: common.theme.primaryRed,
          fontWeight: 600,
          fontSize: 12,
        },
      };
      /**
      const elValue = common.findMaxMin(data, "el");
      state.chart.annotation().dataMarker({
        top: true,
        position: [elValue.max.date, elValue.max.el],
        text: {
          content: "用电峰值：" + elValue.max.el,
          style: {
            ...annotationOption.greenStyle,
          },
        },
        line: { ...annotationOption.line },
      });
      state.chart.annotation().dataMarker({
        top: true,
        position: [elValue.min.date, elValue.min.el],
        text: {
          content: "用电谷值：" + elValue.min.el,
          style: {
            ...annotationOption.redStyle,
          },
        },
        line: { ...annotationOption.line },
      });
      const waterValue = common.findMaxMin(data, "water");
      state.chart.annotation().dataMarker({
        top: true,
        position: [waterValue.max.date, waterValue.max.water],
        text: {
          content: "用水峰值：" + waterValue.max.water,
          style: {
            ...annotationOption.greenStyle,
          },
        },
        line: { ...annotationOption.line },
      });
      state.chart.annotation().dataMarker({
        top: true,
        position: [waterValue.min.date, waterValue.min.water],
        text: {
          content: "用水谷值：" + waterValue.min.water,
          style: {
            ...annotationOption.redStyle,
          },
        },
        line: { ...annotationOption.line },
      });
       */

      state.chart.render();
    };

    watch(
      () => store.getters.centerControl.Energy_currMonthTrend,
      (val) => {
        if (val) {
          getData();
        }
      }
    );

    const getData = () => {
      const { Energy_currMonthTrend } = store.getters.centerControl;
      if (Energy_currMonthTrend) {
        const { el, water } = Energy_currMonthTrend;
        state.data = el.map((item) => {
          const curWater = water.find((w) => w.time == item.time);
          return {
            date: item.time,
            el: item.value,
            water: curWater ? curWater.value : 0,
          };
        });

        if (state.chart) {
          state.chart.changeData(toRaw(state.data));
        } else {
          nextTick(() => {
            initChart();
          });
        }
      }
    };

    onMounted(() => {
      registerTheme("chartTheme", common.chartTheme);
      getData();
    });

    onBeforeUnmount(() => {
      const chartBox = document.getElementById(state.chartId);
      if (chartBox) {
        chartBox.innerHTML = "";
      }
    });
    return {
      ...toRefs(state),
      handleTabChange,
    };
  },
});
</script>

<style lang="less" scoped>
@import "../../styles/common.less";
</style>
